<!--********************************************************************
* Copyright© 2000 - 2018 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'/>
    <title data-i18n="resources.title_uniqueTheme3DLayer"></title>
    <meta name="viewport" content="width=device-width,initial-scale=0.5,maximum-scale=1,user-scalable=no"/>
    <script type="text/javascript" src="../js/include-web.js"></script>
    <style>
        .mapboxgl-popup {
            cursor: auto;
        }

        .mapboxgl-popup-tip {
            border-top-color: rgba(0, 0, 0, 0.8) !important;
        }

        .mapboxgl-popup-content {
            color: whitesmoke;
            background-color: rgba(0, 0, 0, 0.8) !important;
        }
    </style>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
<script>
    var host = window.isLocal ? window.server : "http://iclsvr.supermap.io";
    var dataUrl = host + "/iserver/services/data-jingjin/rest/data";

    var center = [116.640545, 40.531714], themeField = "LANDTYPE", popup;

    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
        " with <span>© <a href='http://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
        " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";

    var map = new mapboxgl.Map({
        container: 'map',
        style: {
            "version": 8,
            "sources": {
                "raster-tiles": {
                    "attribution": attribution,
                    "type": "raster",
                    "tiles": [host + '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}'],
                    "tileSize": 256
                }
            },
            "layers": [{
                "id": "simple-tiles",
                "type": "raster",
                "source": "raster-tiles",
                "minzoom": 0,
                "maxzoom": 22
            }]
        },
        center: center,
        zoom: 7
    });
    map.addControl(new mapboxgl.NavigationControl(), 'top-left');

        buildThemeLayer();

    function buildThemeLayer() {
        var getFeatureBySQLParams = new SuperMap.GetFeaturesBySQLParameters({
            queryParameter: new SuperMap.FilterParameter({
                name: "Jingjin",
                attributeFilter: "SMID > -1"
            }),
            toIndex: 500,
            datasetNames: ["Jingjin:Landuse_R"]
        });

        var queryFeatures = new SuperMap.GetFeaturesBySQLService(dataUrl, {
            eventListeners: {
                processCompleted: function (serviceResult) {
                    if (serviceResult.error) {
                        alert("error:" + JSON.stringify(serviceResult.error));
                        return;
                    }
                    var result = serviceResult.result;
                    if (result.features) {
                        createThemeLayer(result.features)
                    }
                }
            },
            format: SuperMap.DataFormat.GEOJSON
        });
        queryFeatures.processAsync(getFeatureBySQLParams);
    }

    //创建专题图图层
    function createThemeLayer(data) {
        popup = new mapboxgl.Popup({closeOnClick: true}).addTo(map);
        var themeLayer = new mapboxgl.supermap.UniqueTheme3DLayer("uniqueThemeLayer", {
            height: 6000,
            enableHighlight: true,
            themeField: themeField,
            colorStops: [
                ["草地", "#C1FFC1"], ["城市", "#CD7054"], ["灌丛", "#7CCD7C"], ["旱地", "#EE9A49"],
                ["湖泊水库", "#8EE5EE"], ["经济林", "#548B54"], ["沙漠", "#DEB887"], ["水浇地", "#E0FFFF"],
                ["水田", "#388E8E"], ["用材林", "#556B2F"], ["沼泽", "#2F4F4F"]
            ],

            // 显示图例
            showLegend: true,
            legendTitle: resources.text_landUseType,
            legendOrientation: 'vertical'
        });
        themeLayer.setHighlightStyleOptions({callback: highlightCallback}).setData(data).addTo(map);
        map.easeTo({
            pitch: 60,
            bearing: 0
        })
    }

    //设置高亮图层提示
    function highlightCallback(features, evt) {
        var ft = features && features[0];
        if (!ft) {
            popup.remove();
        }
        if (ft && ft.properties) {
            var content = "<span>" + resources.text_landType + ": " + ft.properties[themeField] + "</span><br>";
            content += "<span>" + resources.text_landArea + ": " + ft.properties["AREA"] + " " + resources.text_squareKilometre + "</span><br>";
            popup.addTo(map);
            popup.setLngLat(evt.lngLat);
            popup.setHTML(content);
        }
        map.on('mouseout', function () {
            popup.remove();
        });
    }

</script>
</body>
</html>